<template>
  <div>
    <MyComponent>
      <template #content>
        <template>
          <div style="display: flex;flex-direction: row">
            <div ref="pieChart" style="width: 600px; height: 400px;"></div>
            <div ref="barChart" style="width: 600px; height: 600px;"></div>
          </div>
        </template>


      </template>
    </MyComponent>
  </div>
</template>


<script>
import * as echarts from 'echarts';
import MyComponent from "@/components/backend.vue";

export default {
  components: {
    MyComponent,
  },
  mounted() {
    this.drawPieChart();
    this.drawBarChart();
  },
  methods: {
    drawPieChart() {
      const pieChart = echarts.init(this.$refs.pieChart);
      const pieData = [
        {name: '童话', value: 25},
        {name: '技术', value: 20},
      ];
      pieChart.setOption({
        title: {
          text: '分类占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: pieData,
            label: {
              formatter: '{b}: {c} ({d}%)'
            }
          }
        ]
      });
    },
    drawBarChart() {
      const barChart = echarts.init(this.$refs.barChart);
      const xAxisData = ['出版社A', '出版社B', '出版社C'];
      const seriesData = [[10, 20, 30], [40, 25, 20], [30, 15, 10]];
      const stackData = ['价格1', '价格2', '价格3'];

      barChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: stackData
        },
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: stackData.map((data, index) => ({
          name: data,
          type: 'bar',
          stack: '总量',
          data: seriesData.map((item, i) => item[index])
        }))
      });
    }
  }
};
</script>